<template>
  <div class="container">
    <div class="container-content">
      <el-tabs
        ref="tabsRef"
        v-model="data.currentTabs"
        type="border-card"
        @tab-change="handleFirstTabChange"
      >
        <el-tab-pane
          v-loading="loading"
          type="border-card"
          v-for="(item, index) in data.dataList"
          :key="index"
          :label="item.catelogName"
          :name="index"
        >
          <div v-if="item.children">
            <el-tabs type="border-card" v-model="data.currentSubTabs" stretch>
              <el-tab-pane
                v-for="(subitem, subindex) in item.children"
                :label="subitem.catelogName"
                :name="subindex"
              >
                <div
                  v-if="subitem.formId && subitem.formCode && subitem.formInfo"
                >
                  <FormRender
                    :ref="el => setTableRef(el, subitem)"
                    v-model="subitem.formData"
                    v-model:config="subitem.formInfo"
                  />
                  <div style="display: flex; justify-content: center">
                    <el-button
                      v-loading="loading"
                      icon="circle-check"
                      type="primary"
                      @click="submitForm(subitem.formId, subitem.formCode)"
                      >保存</el-button
                    >
                  </div>
                </div>
                <div v-else>
                  <el-empty description="没有配置表单" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div v-else>
            <el-empty description="没有配置子分类" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts" name="ConfigData">
import {
  queryConfigTreeList,
  addOrUpdateBatch
} from "@/api/admin/system/config/";
import FormRender from "@/views/design/form/FormRender.vue";
import { useMessage } from "@/hooks/message";
import { validateNull } from "@/utils/validate";

const data = reactive({
  dataList: [],
  currentTabs: 0,
  currentSubTabs: 0
});

const formRenderRef = ref({});
const loading = ref(false);
const tableListRefs = ref<any>({});
const componentRefs = ref<any>({});
provide("componentRefs", componentRefs);
provide("tableListRefs", tableListRefs);

const queryConfigCatelogData = () => {
  loading.value = true;
  queryConfigTreeList({}).then(res => {
    if (res.code === 200) {
      data.dataList = res.data;
      data.currentTabs = 0;
    }
    loading.value = false;
  });
};

const handleFirstTabChange = () => {
  data.currentSubTabs = 0;
};

const setTableRef = (el, subitem) => {
  if (el) {
    if (!formRenderRef.value[subitem.formId]) {
      formRenderRef.value[subitem.formId] = el;
    }
  }
};

const submitForm = (formId, formCode) => {
  loading.value = true;
  formRenderRef.value[formId]
    .validateForm()
    .then(valid => {
      if (valid) {
        let formData = formRenderRef.value[formId].getFormData();
        if (
          validateNull(formData) ||
          Object.getOwnPropertyNames(formData).length <= 0
        ) {
          useMessage().warning("请输入参数值");
          return;
        }
        const params = [];
        for (const key in formData) {
          params.push({
            paramName: key,
            paramValue: formData[key],
            paramPrefix: formCode,
            formId: formId
          });
        }
        addOrUpdateBatch(params).then(res => {
          if (res.code === 200) {
            useMessage().success("保存成功");
          } else {
            useMessage().error(res.msg);
          }
        });
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

onMounted(() => {
  queryConfigCatelogData();
});
</script>
